import * as echarts from 'echarts';


const smooth = (data) => {
  const chartData = data.chartData;
  const colorList = data.colorList;
  const sum = chartData.reduce((per, cur) => per + cur.value, 0);
  const gap = (1 * sum) / 100;
  const pieData1 = [];
  const pieData2 = [];
  const gapData = {
    name: "",
    value: gap,
    itemStyle: {
      color: "transparent",
    },
  };
  for (let i = 0; i < chartData.length; i++) {
    pieData1.push({
      ...chartData[i],
      itemStyle: {
        borderRadius: 100,
        shadowColor: "#2a2a34",
        shadowBlur: 5,
        shadowOffsetY: 0,
        shadowOffsetX: 0,
        borderColor: "#2a2a34",
        borderWidth: 2,
      },
    });
    pieData1.push(gapData);

    pieData2.push({
      ...chartData[i],
      itemStyle: {
        borderRadius: 10,
        color: colorList[i],
        opacity: 0.1,
        shadowColor: "#000",
        shadowBlur: 1,
        shadowOffsetY: 5,
        shadowOffsetX: 0,
      },
    });
    pieData2.push(gapData);
  }

  const option = {

    title: [
      {
        text: "75.0%",
        x: "20%",
        y: "50%",
        textAlign: "center",
        textStyle: {
          fontSize: "20",
          fontWeight: "500",
          color: "#98b5d2",
          textAlign: "center",
          textShadowColor: "#000",
          textShadowBlur: "1",
          textShadowOffsetX: 2,
          textShadowOffsetY: 2,
        },
      },
      {
        text: "高等级",
        left: "20%",
        top: "35%",
        textAlign: "center",
        textStyle: {
          fontSize: "16",
          fontWeight: "400",
          color: "#5c5a68",
          textAlign: "center",
          textShadowColor: "#000",
          textShadowBlur: "1",
          textShadowOffsetX: 1,
          textShadowOffsetY: 1,
        },
      },
    ],
    legend: {
      left: "50%",
      top: "40%",
      align: "left",
      itemGap: 18,
      itemWidth: 12,
      itemHeight: 12,
      shadowBlur: 2,
      shadowOffsetY: 0,
      shadowOffsetX: 0,
      textStyle: {
        color: "#D8DDE3",
        rich: {
          name: {
            verticalAlign: "right",
            align: "left",
            fontSize: 12,
            color: "#D8DDE3",
          },
          percent: {
            padding: [0, 0, 0, 10],
            color: "#D8DDE3",
            fontSize: 12,
          },
        },
      },
      formatter: (name) => {
        const item = chartData.find((i) => {
          return i.name === name;
        });
        const p = ((item.value / sum) * 100).toFixed(0);
        return "{name|" + name + "}" + "{percent|" + p + "}" + " %";
      },
    },

    color: colorList,

    series: [
      {
        type: "pie",
        z: 3,
        roundCap: true,
        radius: ["62%", "73%"],
        center: ["20%", "50%"],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: pieData1,
      },
      {
        type: "pie",
        z: 2,
        radius: ["58%", "75%"],
        center: ["20%", "50%"],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        silent: true,
        data: pieData2,
      },
    ],
  };
  const opt = Object.assign({}, option);
  return opt;
}




export default {
  smooth
}
